<!-- 
bootstrap之响应式布局
    - 列嵌套
        某个列内再分为多个小列，这个被划分的列仍划分为12等份
        推荐：
            先添加一个row，再添加一系列col
            它会取消父容器的padding
        不推荐：
            直接添加一系列col
            它不会取消父容器的padding
    - 注意：不能设置左右外边距margin，否则会被挤下来
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
        <title>列</title>
        <style>
            /* 仅仅md-6有高度，md-4没有高度 */
            /* div[class="col-md-6"] {
                border: 1px solid red;
                height: 50px;
            } */

            /* md-6和md-4都有高度 */
            /* > 直接或一级子元素，区别于后代哦 */
            .row > div {
                border: 1px solid red;
                height: 50px;
                /* 
                不能设置外边距，会掉下来，
                因为bootstrap响应式布局底层是百分比占满一行并浮动，
                此时设置外边距，一行就不够空间了，会被挤下来，
                设置为css3盒子模型也没用哦，毕竟margin不是盒子的一部分，而是盒子间距
                 */
                /* margin: 0 10px; */
            }

            div[class="col-md-4"] {
                background-color: cyan;
            }

            .mybox {
                height: 100%;
            }
            .mybox > div {
                padding: 0;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- 划分为：6+6+6=18，第三个会新占一行 -->
                <div class="col-md-6">
                    <!-- 列：总内边距=父内边距+子内边距 -->
                    <!-- 划分为：4+4+4=12 -->
                    <div class="col-md-4">1-1</div>
                    <div class="col-md-4">1-2</div>
                    <div class="col-md-4">1-3</div>
                </div>

                <div class="col-md-6">
                    <!-- 行+列：总内边距=子内边距 -->
                    <div class="row">
                        <div class="col-md-4">2-1</div>
                        <div class="col-md-4">2-2</div>
                        <div class="col-md-4">2-3</div>
                    </div>
                </div>

                <div class="col-md-6">
                    <!-- 容器+列：自己设置内边距、高度 -->
                    <div class="mybox">
                        <div class="col-md-4">3-1</div>
                        <div class="col-md-4">3-2</div>
                        <div class="col-md-4">3-3</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
